<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页练习</title>
    <style>
        a {
            width: 17px;
            height: 20px;
            font-family: 12px/20px "宋体";
            border: 1px solid #e0e1e2;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: #2052a3;
        }
        .pageBtn {
            width: 64px;
        }
        a:hover,.active {
            background-color: #2052a3;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="PageBox">
        <a href="" class="pageBtn">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href=""  class="active">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="" class="pageBtn">下一页</a>
    </div>
</body>
</html>